<template>
	<view>
		<u-navbar title="菜单" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="true" back-icon-color="#FFF"></u-navbar>
		<view class="content w-100 bor-box">
			<scroll-view scroll-y="true" class="scroll w-100 bor-box" :scroll-top="scrollTop">
				<view class="d-flex flex-wrap list">
					<view class="item radius-10 d-flex" v-for="(t, i) in foodsList" :key="i" @click="delFood(i)">
						<text>{{ t }}</text>
						<u-icon class="t" name="close" color="#fff" size="16"></u-icon>
					</view>
				</view>
			</scroll-view>
			<view class="btns d-flex-center">
				<input class="ipt radius-10" type="text" v-model="foodName" placeholder="输入菜名" :confirm-hold="true" :hold-keyboard="true" @confirm="addFood" />
				<text class="btn radius-10" @click="$u.throttle(addFood, 500)">添加</text>
			</view>
			<view class="save-btn d-flex-center w-100 radius-10 bor-box" @click="$u.debounce(saveMenu, 500)"><text>保存菜单</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBackground: this.$navBackground,
			menus: '',
			foodsList: [],
			choosedFood: [],
			foodName: '',
			scrollTop: 0
		};
	},
	onLoad() {
		let data = uni.getStorageSync('menus');
		this.menus = data;
		this.foodsList = [...data.menus[0]];
	},
	methods: {
		// 删除菜名
		delFood(i) {
			this.foodsList.splice(i, 1);
		},
		// 添加
		addFood() {
			let name = this.$u.trim(this.foodName, 'all');
			if (name) {
				this.foodsList.push(this.foodName);
				this.foodName = '';
				setTimeout(() => {
					this.getViewHeight();
				}, 300);
			} else {
				this.$tools.showToast('请输入菜名哦~');
			}
		},
		// 保存菜单
		saveMenu() {
			if (this.foodsList.length > 0) {
				if (this.foodsList.toString() === this.menus.menus[0].toString()) {
					this.$tools.showToast('没有更改菜单哦~');
					return;
				} else {
					// 请求接口修改菜单
					this.$cloudApi.call({
						name: 'menus',
						data: {
							action: 'update',
							_id: this.menus._id,
							menus: [this.foodsList]
						},
						success: res => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页
							this.$tools.showToast('保存成功');
							setTimeout(() => {
								uni.navigateBack({
									success: function() {
										beforePage.onLoad(); // 执行上一页的onLoad方法
									}
								});
							}, 500);
						},
						fail: err => {
							this.$tools.showToast('保存失败');
							console.log(err);
						}
					});
				}
			} else {
				this.$tools.showToast('菜单不能为空哦~');
			}
		},
		// 获取列表盒子高度
		getViewHeight() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.list')
				.boundingClientRect(data => {
					this.scrollTop = data.height;
				})
				.exec();
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 20rpx 32rpx;
	.scroll {
		height: 30vh;
		border: 1px solid #f1f1f1;
		border-radius: 20rpx;
		padding: 20rpx;
		.list {
			.item {
				padding: 6rpx 10rpx;
				background: $tian-main-color;
				color: #ffffff;
				margin-bottom: 10rpx;
				margin-right: 10rpx;
				.t {
					margin-left: 12rpx;
				}
			}
		}
	}
	.btns {
		margin-top: 30rpx;
		.btn {
			padding: 10rpx 20rpx;
			background: $tian-main-color;
			color: #ffffff;
			margin-left: 30rpx;
		}
		.ipt {
			width: 400rpx;
			padding: 10rpx 20rpx;
			border: 1px solid #f1f1f1;
		}
	}
	.save-btn {
		background: $tian-main-color;
		height: 80rpx;
		color: #ffffff;
		margin-top: 40rpx;
	}
}
</style>
